//  创建仓库=>vuex
//（1）引入vue和vuex
import Vue from 'vue'
import Vuex from 'vuex'
//(2)注册vuex =>所有的插件=》Vue.use()注册
Vue.use(Vuex)

//(3)创建仓库
let store = new Vuex.Store({

  state: {
    age: 30,
    num: 1,
    music: ''
  },
  //属性2：相当于vue计算属性（state中的数据不是我想要展示的数据=》对他在处理一下）
  getters: {
    // 用法
    //(1)有语义化定义
    //（2）这个方法的参数： 第一个参数 就是 state(必须)放数据
    //特性： 具有缓存机制
    brotherAge(state) { //
      console.log('具有缓存机制');
      console.log(this);

      return state.age + 5 //35
    },
    sAge(state) { //
      console.log('具有缓存机制');
      console.log(this);

      return state.age + 10 //35
    },
    //根据用户 使用的情况动态传递参数 
    getFat(state) {
      // return 方法就是使用方法
      return (datas) => { //data就是使用的参数
        return state.age + datas //这个方法 返回数据就是  getFat
      }
    },

  },
  //属性3 修改数据=》mutations
  //作用：修改state中的数据
  //  注意：写同步的方法（不能写异步方法）
  // 用法和vue中的methods 一样
  mutations: {
    changeAge(state, data) {
      //写同步=》不能写异步 ajax settimeout
      state.age = state.age + data
    },
    //可以传递参数
  },
  //属性4：actions
  //作用：修改数据（state）但是他是可以写异步的
  //修改数据执行机制：
  //1 触发actions中定义的方法 =》在通过commit触发Mutations中定义方法=》去修改state中的数据
  actions: {
    //1注意actions中定义的方法 和mutations中的方法同名
    // 2这个方法的参数: 第一个参数 store 对象 第二个参数就是使用的时候传递的参数
    aychangeAge({
      commit
    }, data) { //
      //异步
      setTimeout(() => {
        //业务发送一个请求(异步)，请求完成获取到数据
        commit('changeAge', data)
      }, 2000);
    }
  }
})

//(4)将store暴露出去=》添加到根实例中做一个属性
export default store


//注意：vuex 中修改state中的数据只能是mutations中定义的方法，